
import React, { Component,  } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../../actions/shop'
import Container from '../../../components/Container'
import SwipeImage from '../../../components/SwipeImage'
import ReactSwiper from '../../../components/Scroller/ReactSwiper';
import MeScrollContainer from '../../../components/MeScroll'

  /*
  group_type=6:商品轮播图组
  group_type=5:轮播图组
  group_type=1:一行两列
  group_type=0:一行一列
  group_type=4:左右滑动
  group_type=2:一行三列
  group_type=3:一行四列
   */
class Home extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    
    

  }
  componentDidMount(){
    let {actions} = this.props
    actions.getGroupList()
    
  }
  goPage(parentId,childrenId,name,e){
    this.context.router.history.push(`/groups?parentId=${parentId}&childrenId=${childrenId}&name=${name}`)
  }
  
  render(){
    let {groupList} = this.props
    return(
        <Container >
          <MeScrollContainer >
          <div className='home-container' style={{'minHeight':'500px'}}>
          {
            groupList.map((item,i)=>{
              return(
                <div key={i} className='group-section'>
                  {
                    do{
                      if(item.group_type == 0)
                        {this.renderOneCell(item)}
                      else if(item.group_type == 1)
                        { this.renderTwoCell(item)}
                      else if(item.group_type == 2)
                        { this.renderThreeCell(item)}
                      else if(item.group_type == 3)
                        { this.renderFourCell(item)}
                      else if(item.group_type == 4)
                        { this.renderReactSwiper(item)}
                      else if(item.group_type == 5)
                        { this.renderSwipe(item)}
                      else if(item.group_type == 6){
                        this.renderReactSwiperGoods(item)
                      }
                      
                    }
                  
                  }
                </div>
                
              )
            })
          }
           
          </div>
          </MeScrollContainer>
         {/* <div className='beian' onClick={ ()=>{window.open("http://www.miitbeian.gov.cn");     }}>
            <span >雨轩信息技术有限公司 粤ICP备17150709号</span>
          </div>*/}
        </Container>
    )
  }
  
  //一行一列
  renderOneCell(oneCell){
    if(!oneCell) return null
    return(
      <div className="one-cell-items">
      {
        oneCell.group_item.map((item,i) =>{
          return(
            <img src={item.item_img1} key={i} title={item.name} onClick={ this.goPage.bind(this,0,item.group_item_id,item.name)}/>
            )
        })
      }
      </div>
      )
  }
  //一行两列
  renderTwoCell(twoCell){
    if(!twoCell) return null
    return(
      <section className='two-cell-part'>
          <div className='group-name'>
            <div className='txt'> {twoCell.group_name}</div>
            <span className='button'>View More</span>
          </div>
          <div className='two-cell-items clearfix'>
          {
            twoCell.group_item.map((item,i) =>{
              return(
                <div onClick={ this.goPage.bind(this,0,item.group_item_id,item.name)} className={`item bdr-bottom ${i%2==0?'bdr-r':""}`} key={i}>
                  <div className="text">{item.name}</div>
                  <div className="sub-text">{item.sub_name}</div>
                  <div className="imgs">
                    {item.item_img1 ? <div className="cimg"> <img className="img" src={item.item_img1}/> </div>: null}
                    {item.item_img2 ? <div className="cimg"> <img className="img" src={item.item_img2}/> </div> : null}
                  </div>
                </div>
                )
            })
          }
          </div>
          
      </section>
      
      )
  }
  //一行3列
  renderThreeCell(threeCell){
    if(!threeCell) return null
    return(
      <div className="three-cell-part">
      <div className='group-name'>
        <div className='txt'> {threeCell.group_name}</div>
        <span className='button'>View More</span>
      </div>
      <div className='three-cell-items clearfix'>
      {
        threeCell.group_item.map((item,i) =>{
          return(
            <div key={i} className={`item bdr-bottom ${(i+1)%3==0?'':"bdr-r"}`}>
               <div className="text">{item.name}</div>
              <img className='img' src={item.item_img1} title={item.name} onClick={ this.goPage.bind(this,0,item.group_item_id,item.name)}/>
              
            </div>
            )
        })
      }
      </div>
      </div>
      )
  }
  //一行4列
  renderFourCell(fourCell){
    if(!fourCell) return null
    return(
      <div className="four-cell-items clearfix">
      {
        fourCell.group_item.map((item,i) =>{
          return(
            <div key={i} className={`item bdr-bottom`} >
              <img className='img' src={item.item_img1} title={item.name} onClick={ this.goPage.bind(this,0,item.group_item_id,item.name)}/>
            </div>
            )
        })
      }
      </div>
      )
  }
  // 图片轮播
  renderSwipe(swipeData){
    if(!swipeData) return null
    return <SwipeImage height={'50vw'} bannelThumbImgs={swipeData.group_item} loop={true}
     onTouch={(item)=>{
       this.goPage(0,item.group_item_id,item.name)
      
    }} />
  }
  //左右滑动
  renderReactSwiper(cells){
    if(!cells || !cells.group_item) return null
    const row = (rowData, rowID)=>{
      return (
        <div className="nav-item" 
        onClick={ this.goPage.bind(this,0,rowData.group_item_id,rowData.name)}>
          <div className="img">
            <img src={rowData.item_img1}/>
          </div>
          <div className="name">{rowData.name}</div>
        </div>    
      )
      }
    return(
      <div className="muti_list">
        <div className="quick-entry-nav" >
          {
            cells.group_item.length>0?
            <ReactSwiper
            dataSource={cells.group_item}
            options={{
            slidesPerView:'auto',
            paginationClickable:true,
            spaceBetween:5,
            freeMode:true,
            observer: true,
            }}
            className="li-four"                 
            renderRow={row}
          />:""
          }
        </div>
      </div>
      )
  }
  //商品左右滑动
  renderReactSwiperGoods(cells){
    if(!cells || !cells.group_item) return null
    const row = (rowData, rowID)=>{
      return (
        <div className="nav-item" 
        onClick={()=>{ this.context.router.history.push(`/goods/${rowData.goods_id}`)} }>
          <div className="img">
            <img src={rowData.goods_image}/>
          </div>
          <div className="name">{rowData.goods_name}</div>
          <div className="price red">${rowData.goods_price}</div>
        </div>    
      )
      }
    return(
      <div className="muti_list" style={{ padding:'0 10px'}}>
        <div className="quick-entry-nav" >
          {
            cells.group_item.length>0?
            <ReactSwiper
            dataSource={cells.group_item}
            options={{
            slidesPerView:'auto',
            paginationClickable:true,
            spaceBetween:10,
            freeMode:true,
            observer: true,
            }}
            className="li-goods"                 
            renderRow={row}
          />:""
          }
        </div>
      </div>
      )
  }
}


function mapStateToProps(state){
  let groupList =state.groupList.toJS()
  return {
    groupList,
    
  }
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}
export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(Home)
